<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<link rel="stylesheet" type="text/css"
	href="<%=basePath %>css/plugins/bootstrap-table/bootstrap-table.min.css">
<style>
.row{
	background-color: white;
	height: 100%;
}
/* 阴影悬浮感觉 */
.divContainer {
	box-shadow: 2px 2px 5px #bbb;
}
td {
	font-size: 10px;
	text-align: center;
}

th {
	font-size: 13px;
	text-align: center;
}
#query{
	position: absolute;
	left: 100px;
	top:10px;
	height: 40px;
	z-index: 999
}
.pagetitle{
	height: 50px;
	text-align: center;
	line-height:50px;
	font-size: 18px
}
#orgCode{
	font-size: 9px
}
</style>
<div class="row">
	<div class=" col-sm-12 pagetitle"><label>员工部门分配</label></div>
	<div class=" col-sm-12">
		<div class="row base-margin" id="query">
			<form class="form-inline" role="form"
				style="float: left; width: 100%" method="post" id="queryForm">
				<div class="form-group">
					<label for="orgCode">所属部门:</label> 
					<select class="form-control" id="orgCode" name="orgCode">
					</select>
				</div>
				<div class="form-group">
					<label for="userName">姓名:</label> <input type="text"
						class="form-control" name="userName" id="userName"
						placeholder="请输入名称">
				</div>
				<div class="form-group">
					<label for="tel">联系方式:</label> <input type="text"
						class="form-control" name="tel" id="tel"
						placeholder="请输入联系方式">
				</div>
				<div class="form-group">
					<button type="button" id="queryBtn" onclick="doQuery()"
						class="btn btn-success">查找</button>
				</div>
				<div class="form-group btn-right">
					<button type="button" class="btn btn-danger" id="addBtn"
						onclick="addUserRole()">分配部门</button>
				</div>
			</form>
		</div>
		<div class="container  animated fadeInDown" style="width: 100%;">
			<table id="data-table">
			</table>
		</div>
	</div>
</div>
<script
	src="<%=basePath %>js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script
	src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script
	src="<%=basePath%>js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
function doQuery(){
	 $('#data-table').bootstrapTable('destroy');
	 initTable();
}
 
function initTable(){
	 var name = $('#userName').val();
	 var tel = $('#tel').val();
	 var roleId = $('#orgCode').val();
    $('#data-table').bootstrapTable({
        url: "<%=basePath%>Employee/getEmployeeList",
        dataField: "userList",//服务端返回数据键值 就是说记录放的键值是rows，分页时使用总记录数的键值为total
        height: tableHeight(),//高度调整
        width:tableWidth(),
        search: false,//是否搜索
        pagination: true,
        striped: true, 
        pageSize: 20,      //每页的记录行数（*）
        pageList: [10, 25, 50, 100], //分页步进值
        sidePagination: "server",//服务端分页
        contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
        dataType: "json",//期待返回数据类型
        method: "POST",//请求方式
        searchAlign: "left",//查询框对齐方式
        queryParamsType: "",//查询参数组织方式
        queryParams: function getParams(params) {
            //params obj
			params.name = $('#userName').val();
            params.tel = $('#tel').val();
            params.roleId = $('#orgCode').val()==0?null:$('#orgCode').val();
            params.other = "otherInfo";
            return params;
        },
        showRefresh: true,//刷新按钮
        showColumns: true,//列选择按钮
        buttonsAlign: "right",//按钮对齐方式
        toolbar: "#toolbar",//指定工具栏
        toolbarAlign: "right",//工具栏对齐方式
        columns: [
       	 {
       		 checkbox: true,
       		 title:"选中",
       		 align:"center",
       		 valign:"middle"
       	 },
            {
                field : 'id',
                title : '用户ID',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'realName',
                title : '姓名',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'sex',
                title : '性别',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'tel',
                title : '联系方式',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'roles',
                title : '所属部门',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'createDate',
                title : '创建账号时间',
                align : 'center',
                valign : 'middle'
            }],
        onClickRow: function(row, $element) {
            //$element是当前tr的jquery对象
            $element.addClass('animated shake');
            if ($element.find('td:nth-child(1)').children().is(":checked")){
            	$element.find('td:nth-child(1)').children().prop("checked", false);
            	$element.removeClass('selected');
            }else{
            	$element.find('td:nth-child(1)').children().prop("checked", true);
            	$element.addClass('selected');
            }
            setTimeout(function(){
           	  $element.removeClass('animated shake')
			}, 400);
            $('body').delegate();
        },//单击row事件
        locale: "zh-CN", //中文支持
/*          detailView: true, //是否显示详情折叠
        detailFormatter: function(index, row, element) {
            var html = '<h1>展开详情</h1>';
            $.each(row, function(key, val){
                html += "<p>" + key + ":" + val +  "</p>"
            });
            return html;
        } */
    });
}
//根据窗口调整表格高度
$(window).resize(function() {
    $('#data-table').bootstrapTable('resetView', {
        height: tableHeight()
    })
})
 
 function addUserRole(){
	var checkObj =  $('#data-table').bootstrapTable('getAllSelections');
	var role =  $('#orgCode').val();
	var roleText =$('#orgCode').find("option:selected").text();
	var ids = [];
	if(checkObj.length==0){
		toastr.warning('请先选中您要授权的用户','错误');
		return false;
	}
	if (role==null){
		toastr.warning('请选择需要分配的部门','错误');
		return false;
	}
	
	new $.flavr({ 
		content : '确认将选中用户分组至："'+roleText+'"?',
        dialog : 'confirm', 
        onConfirm : function(){
        	$(checkObj).each(function(index,obj){
				  ids[index]=obj.id;
		 	});
			$.ajax({
				url:'<%=basePath%>Role/addUserRole',
				data:{'ids':ids,'roleId':role},
				type:'POST',
				dataType:'json',
				success:function(data){
					if (data.code=='200'){
						toastr.success(data.message,'成功');
						 $('#data-table').bootstrapTable('refresh');
					}else{
						toastr.error(data.message,'操作失败');
					}
				},
				error:function(){
					toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
				}
			});
        }, 
        onCancel : function(){
        	toastr.warning('已取消操作','已取消');
        } 
    });
}
 
 
 $(function() {
	 initTable();
	 $.ajax({
		 url:'<%=basePath%>Role/getAllRoles',
		 dataType:'JSON',
		 success:function(data){
			 var html = '<option value="0">默认分组</option>';
			 $(data.data).each(function(index,element){
				 html = html + '<option value="'+element.id+'">'+element.role+'</option>'
			 });
			 $('#orgCode').html(html);
		 }
	 })
	/*   
     $("#addRecord").click(function(){
         alert("name:" + $("#name").val() + " age:" +$("#age").val());
     }); */
 })

 function tableHeight() {
     return $(window).height() - 50;
 }
 function tableWidth() {
     return $(window).width() - 50;
 }
</script>

